<template>
  <div>
    <a-spin tip="加载中..." size="large" :spinning="spinning">
      <!-- 数据概况 -->
      <a-card style="height: auto; background-color: #f0f2f5">
        <div style="font-size: 22px; color: #000000">数据概况</div>
        <div
          style="
            margin-top: 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-around;
          "
        >
          <!-- 流水统计  -->
          <div class="card_box">
            <div class="card_box_every">
              <div>
                <h3>流水统计（元）</h3>
                <h2
                  v-text="totalPrice === null ? 0 : totalPrice"
                  style="font-weight: bold; font-size: 24px"
                ></h2>
              </div>
              <div>
                <span>昨日新增：</span>
                <span
                  style="color: #529b2e; font-size: 18px; font-weight: bold"
                  v-text="
                    totalPriceYesterday === null ? 0 : totalPriceYesterday
                  "
                ></span>
              </div>
            </div>
          </div>

          <!-- 订单统计 -->
          <div class="card_box">
            <div class="card_box_every">
              <div>
                <h3>订单统计（单）</h3>
                <h2
                  v-text="goodsTotal === null ? 0 : goodsTotal"
                  style="font-weight: bold; font-size: 24px"
                ></h2>
              </div>
              <div>
                <span>昨日新增：</span>
                <span
                  v-text="GoodsYesterday === null ? 0 : GoodsYesterday"
                  style="color: #529b2e; font-size: 18px; font-weight: bold"
                ></span>
              </div>
            </div>
          </div>

          <!--  销量统计 -->
          <div class="card_box">
            <div class="card_box_every">
              <div>
                <h3>销量统计</h3>
                <h2
                  v-text="PipelineTotal === null ? 0 : PipelineTotal"
                  style="font-weight: bold; font-size: 24px"
                ></h2>
              </div>
              <div>
                <span>昨日新增：</span>
                <span
                  style="color: #529b2e; font-size: 18px; font-weight: bold"
                  v-text="PineTotalYes === null ? 0 : PineTotalYes"
                ></span>
              </div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 数据总结 -->
      <a-card style="height: auto; margin-top: 10px; background-color: #fafcff">
        <CommonEchart />
      </a-card>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import CommonEchart from "@/views/echarts/CommonEchart";
import { useAdminStore } from "@/stores/admin";
import { findGoodsTotal, findTotalPrice, findPineLineToal } from "@/api/index";

const adminStore = useAdminStore();
const spinning = ref(true);
const goodsTotal = ref(0);
const GoodsYesterday = ref(0);
const totalPrice = ref(0);
const totalPriceYesterday = ref(0);
const PipelineTotal = ref(0);
const PineTotalYes = ref(0);

onMounted(() => {
  getGoodsTotal();
  getTotalPrice();
  getTotalPine();
  setTimeout(() => {
    spinning.value = false;
  }, 2000);
});

//获取商品订单
function getGoodsTotal() {
  findGoodsTotal(adminStore.admin.key).then((res) => {
    if (res.code === 200 && res.data !== null) {
      goodsTotal.value = res.data.total;
      GoodsYesterday.value = res.data.yesterday;
    }
  });
}

//获取流水统计
function getTotalPrice() {
  findTotalPrice(adminStore.admin.key).then((res) => {
    if (res.code === 200 && res.data !== null) {
      totalPrice.value = res.data.total;
      totalPriceYesterday.value = res.data.yesterday;
    }
  });
}

//获取销量统计
function getTotalPine() {
  findPineLineToal(adminStore.admin.key).then((res) => {
    if (res.code === 200 && res.data !== null) {
      PipelineTotal.value = res.data.total;
      PineTotalYes.value = res.data.yesterday;
    }
  });
}
</script>

<style scoped>
.custom-class {
  /* color: #E6A23C; */
  color: red;
}

:deep(.ant-card-body) {
  padding: 10px;
}

.card_box {
  border-radius: 8px;
  width: 250px;
  height: 100px;
  transition: all 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom right, #ffffff, #f0f0f0);
}

.card_box_every {
  height: 100px;
  background-color: #d9ecff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
}
</style>